<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <t-select v-bind="$attrs">
    <t-option v-for="item in options" :key="item.stem" :value="item.stem" class="overlay-options">
      <div>
        <t-icon :name="item.stem" />
      </div>
    </t-option>
    <template #valueDisplay>
      <t-icon :name="$attrs.modelValue" :style="{ marginRight: '8px' }" />{{ $attrs.modelValue }}
    </template>
  </t-select>
</template>
<script lang="ts">
export default {
  name: 'IconPicker',
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { manifest } from 'tdesign-icons-vue-next/lib/manifest';
// 获取全部图标的列表
const options = ref(manifest);
</script>
<style>
.overlay-options {
  display: inline-block;
  font-size: 20px;
}
</style>
